import React, { Component } from 'react';
import { Button, Drawer, Form, Input, Radio, Tooltip, Select, Divider, Row, Col } from 'antd';
import { inject, observer } from 'mobx-react';
import '../less/index.less';
import EditResTable from './EditResTable';
import { QuestionOutlined } from '@ant-design/icons';

@inject('store')
@observer
class ModuleDrawer extends Component {
  formRef = React.createRef();

  closeHandler = () => {
    this.props.store.closeModuleDrawer();
  };

  confirmHandler = async () => {
    try {
      const values = await this.formRef.current.validateFields();
      this.props.store.saveModule(values);
    } catch (e) {
    }
  };

  onUrlChange = e => {
    let url = e.target.value.trim();
    let pos = url.indexOf("?");
    url = url.substring(0, pos == -1 ? url.length : pos);
    pos = url.lastIndexOf(".");
    url = url.substring(0, pos == -1 ? url.length : pos);
    const items = url.split('/');
    let patternStr = '/**/';
    if (items.length >= 2) {
      patternStr+= (items[items.length - 2] + '/');
      patternStr+= (items[items.length - 1] + '/*');
    }else if(items.length == 1 && items[0] != '') {
      patternStr += (items[0] + "/*");
    }else {
      patternStr = '';
    }
    // const resList = this.props.store.moduleDrawerData.resList;
    // console.log(resList)
    // if (resList.length > 0 && resList[0].name == null) {
    //   this.props.store.inputRes('value', patternStr, 0);
    // }
  };

  render() {
    const { store } = this.props;
    const { editData, visible, loading, resList } = store.moduleDrawerData;
    const layout = { labelCol: { span: 6 }, wrapperCol: { span: 18 } };
    const oneItemLayout = { labelCol: { span: 3 }, wrapperCol: { span: 21 } };
    const values = { ...editData };
    if (!editData.appId) {
      values.appId = store.appList[0] ? store.appList[0].id : null;
    }
    if (editData.isEmbed == null) {
      values.isEmbed = true;
    }
    if (editData.isAutorun == null) {
      values.isAutorun = false;
    }
    if (editData.status == null) {
      values.status = true;
    }
    return (
      <Drawer visible={visible} width={820} closable={false} bodyStyle={{ padding: '15px 15px 60px 15px' }}
              onClose={this.closeHandler} destroyOnClose={true}>
        <Divider>功能模块{editData.parentName == null ? '' : ' [上级:' + editData.parentName + ']'}</Divider>
        <Form {...layout} initialValues={values} ref={this.formRef} style={{ marginBottom: 20 }}>
          <Form.Item name='id' noStyle={true}><input type='hidden'/></Form.Item>
          <Form.Item name='parentId' noStyle={true}><input type='hidden'/></Form.Item>
          <Form.Item name='isLeaf' noStyle={true}><input type='hidden'/></Form.Item>
          <Form.Item name='cascade' noStyle={true}><input type='hidden'/></Form.Item>
          <Row gutter={8}>
            <Col span={12}>
              <Form.Item label="菜单名称" name='name' rules={[{ required: true, message: '请输入菜单名称' }]}>
                <Input autoComplete="off"/>
              </Form.Item>
            </Col>
            <Col span={12}>
              <Form.Item label="所属应用" name='appId' rules={[{ required: true, message: '请选择所属应用' }]}>
                <Select>
                  {store.appList.map((item, index) => {
                    return (<Select.Option key={item.id} value={item.id}>{item.name}</Select.Option>);
                  })}
                </Select>
              </Form.Item>
            </Col>
          </Row>
          <Row>
            <Col span={12}>
              <Form.Item label="菜单路径" name='url'><Input autoComplete="off" onChange={this.onUrlChange}/></Form.Item>
            </Col>
            <Col span={12}>
              <Form.Item label="菜单图标" name='icon'><Input autoComplete="off"/></Form.Item>
            </Col>
          </Row>
          <Row>
            <Col span={12}>
              <Form.Item label="菜单标识" name='key'><Input autoComplete="off"/></Form.Item>
            </Col>
            <Col span={12}>
              <Form.Item label="打开方式" name='isEmbed'>
                <Select>
                  <Select.Option value={true}>嵌入页面</Select.Option>
                  <Select.Option value={false}>弹出页面</Select.Option>
                </Select>
              </Form.Item>
            </Col>
          </Row>
          <Row>
            <Col span={12}>
              <Form.Item name='isAutorun' label={
                <span><Tooltip title="进入系统后，会自动打开该功能模块。">
                  <QuestionOutlined/>
                  </Tooltip>&nbsp;自动运行</span>}>
                <Select>
                  <Select.Option value={true}>是</Select.Option>
                  <Select.Option value={false}>否</Select.Option>
                </Select>
              </Form.Item>
            </Col>
            <Col span={12}>
              <Form.Item label='当前状态' name='status'>
                <Select>
                  <Select.Option value={true}>启用</Select.Option>
                  <Select.Option value={false}>停用</Select.Option>
                </Select>
              </Form.Item>
            </Col>
          </Row>
          <Row>
            <Col span={24}>
              <Form.Item label="菜单描述" name='remark' {...oneItemLayout}>
                <Input.TextArea/>
              </Form.Item>
            </Col>
          </Row>
        </Form>
        <Divider>拥有的资源</Divider>
        <EditResTable dataSource={resList} addRes={() => store.addRes()}
                      removeRes={index => store.removeRes(index)}
                      inputRes={(col, value, index) => store.inputRes(col, value, index)}/>
        <div className='footer'>
          <Button onClick={this.closeHandler} style={{ marginRight: 8 }}>取消</Button>
          <Button loading={loading} onClick={this.confirmHandler} type="primary">保存</Button>
        </div>
      </Drawer>);
  }
}

export default ModuleDrawer;
